import React from 'react'
import Mycontent from "../../components/Mycontent/Mycontent";
import Buttom from "../../components/Buttom/Buttom";
import MyFooter from "../../components/MyFooter/MyFooter";
import MyHeaderFunc from "../../components/MyHeader/MyHeaderFunc";
import {withTranslation,WithTranslation} from 'react-i18next';
import {connect} from 'react-redux'
import {Dispatch} from 'redux'
import {Spin} from 'antd'
import {RootState} from "../../redux/store/store";
import {getrecommenddata} from "../../redux/Recommend/recommendaction";

const mapStateToProps=(state:RootState)=>{
    return{
        productList: state.recommend.productList,
        isloading: state.recommend.isloading,
        error: state.recommend.error
    }
}
const mapDispatchToProps=(dispatch:Dispatch)=>{
    return {
        requestdata:()=>{dispatch(getrecommenddata() as any)}//???
    }
}
type PropsType=WithTranslation & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>
class Home extends React.Component<PropsType>{
    componentWillMount(){
        this.props.requestdata();

    }
    render(){
        if(this.props.isloading) {
            return (<Spin style={{width:"100%",height:"100vh"}}></Spin>)
        }else if(this.props.error){
            return (<h1>网络错误</h1>)
        }
        return(
            <div className="home">
                <MyHeaderFunc></MyHeaderFunc>
                <Mycontent productList={this.props.productList}></Mycontent>
                <Buttom></Buttom>
                <MyFooter></MyFooter>
            </div>
        )
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(withTranslation()(Home))